<script setup lang="ts">
import Carousel from '../components/Carousel.vue';
import Cates from '../components/Cates.vue';
import { userinfo } from '@/stores/counter';
import SubNewsList from '../components/SubNewsList.vue';
import { ref, inject, onMounted, onBeforeMount } from 'vue';
import type { Cate } from '../types/types.d.ts';
// import getSubArticleList from '@/api/getSubArticleList';
import { useRoute, useRouter } from 'vue-router';
import subscribeCate from '@/api/subscribeCate';
import articleStar from '@/api/articleStar';
const { getSubscribeStatus, setSubscribeStatus, getSubscribeList } =
  subscribeCate();
const { getFavArticle } = articleStar();
const route = useRoute();
const router = useRouter();
const user = userinfo();
const loading = ref(false);

onBeforeMount(async () => {
  console.log('父组件开始mounted');
  loading.value = true;
  user.fav.list = [];
  user.fav.total = 0;
  console.log(loading.value);
  await getFavArticle();
  loading.value = false;
  console.log(loading.value);
  console.log('父组件结束mounted');
  //   if (user.pages.sub.cate == -1 || user.pages.sub.cate != cateData!.id) {
  //     loading.value = true;
  //     user.pages.sub.list = [];
  //     user.pages.sub.total = 0;
  //     await subList(cateData!.id);
  //   }
  //   loading.value = false;
});

function goback() {
  router.go(-1);
}
</script>

<template>
  <div class="sub-div">
    <div class="goback" @click="goback()">
      <el-icon color="#f5900a">
        <ArrowLeftBold />
      </el-icon>
    </div>
    <div class="sub-title font-xbs">我点赞的</div>

    <div class="sub-newp" v-loading="loading">
      <LikeArticleList />
    </div>
  </div>
</template>

<style scoped>
.sub-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sub-title {
  font-size: 40px;
  font-weight: bold;
}

.sub-newp {
  display: flex;
  width: 100%;
  min-height: 500px;
}

.goback {
  width: 40px;
  height: 40px;
  background-color: white;
  box-shadow: #475669 1px 1px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-left: 100px;
  cursor: pointer;
}
</style>
